<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar>
      <!-- 自定义左侧 -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 自定义左侧 -->
      <template #right>
        <van-button @click="$router.push('/search')" class="search-btn" round icon="search">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 频道栏 -->
    <!-- v-model用来获取被选中的频道下标 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
        <article-list :channel_id="item.id" />
      </van-tab>

      <div class="icon-box">
        <van-icon @click="chnsShow = true" name="wap-nav" />
      </div>
    </van-tabs>

    <!-- 频道管理 -->
    <van-action-sheet v-model="chnsShow" title="频道管理">
      <!-- 对于原生标签而言，$event就是事件对象 -->
      <!-- 对于组件而言，$event就是传递过来的数据 -->
      <!-- <channels
        :ownChannels="ownList"
        :allChannels="allList"
        :value="active"
        @input="active = $event"
        @close="chnsShow = false"
      /> -->

      <!-- 
        v-model的本质
          其实就是在监听input事件，并把input事件得到数据赋值给绑定的数据
          并且还绑定了value属性，把绑定的数据赋值给这个组件的value
          所以，之前为什么说只能给表单元素用，因为表单元素才有input事件和value属性
          
        所以可以理解为 v-model 本质上就是个语法糖，它相当于帮你生成
          @input="数据=$event"
          :value="数据"
        例如：你写 v-model="active" 它就相当于帮你生成  @changeActive="active=$event" 和 :idx="active"
       -->
      <channels
        :ownChannels="ownList"
        :allChannels="allList"
        v-model="active"
        @close="chnsShow = false"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import articleList from "./articleList.vue";
import channels from "./channels.vue";

// 导入接口
import { ownChannelsAPI, allChannelsAPI } from "@/api";
import { getChannels } from "@/utils/storage";

export default {
  name: "home",
  components: {
    articleList,
    channels,
  },
  data() {
    return {
      active: 0,
      // 保存自己频道的数组
      ownList: [],
      chnsShow: false,
      allList: [],
    };
  },

  destroyed () {

    console.log('销毁了')
  },
  async created() {
    console.log('创建了')
    /*
    // 判断有没有登录
    if (this.$store.state.tokenObj.token) {
      // 获取用户自己的频道
      let res1 = await ownChannelsAPI();
      this.ownList = res1.data.data.channels;

    } else {
      // 如果没登录，先获取本地存储
      let res1 = getChannels();

      // 判断本地存储有没有数据
      if (res1) {
        // 有数据就直接把数据给res1
        this.ownList = res1;
      } else {

        // 如果没数据就发请求获取默认频道
        let res1 = await ownChannelsAPI();
        this.ownList = res1.data.data.channels;
      }
    }
    */
    // 优化思想：经过分析发现，要么是我有token就要发请求，要么就是本地存储没数据也要发请求
    // 所以，完全可以把他们放到一起，用||连接
    let local = getChannels();
    if (this.$store.state.tokenObj.token || !local) {
      let res1 = await ownChannelsAPI();
      this.ownList = res1.data.data.channels;
    } else {

      // 如果没登录并且本地存储有值，都是从本地存储取的
      this.ownList = local;
    }

    // 获取所有频道
    let res2 = await allChannelsAPI();
    this.allList = res2.data.data.channels;
  },
};
</script>

<style lang="less" scoped>
.home {
  .logo {
    width: 130px;
    height: 100%;
    // 在vue-cli4的时代,这里用@符号不会代表src
    // 所以在@符号前面加 ~ 号才能代表src
    background: url(~@/assets/logo.png) no-repeat center / contain;
  }

  .search-btn {
    width: 90px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    .van-icon {
      color: #fff;
    }
  }

  // tab栏目--频道栏布局
  .van-tabs {
    position: relative;
    ::v-deep .van-tabs__wrap {
      width: 345px;
    }

    .icon-box {
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;

      .van-icon-wap-nav {
        font-size: 24px;
      }
    }
  }
}
</style>